<script setup>
import {ref ,onMounted} from 'vue';
import {queryAllApi,addApi,queryByIdApi,updateApi,deleteByIdApi} from '@/api/dept';
import { ElMessage,ElMessageBox } from 'element-plus';

onMounted(()=>{
  search();
})
//部门列表
const deptList = ref([])
//对话框
const dialogFormVisible = ref(false);
//对话框名称
const dept = ref({name: ''});
const formTitle = ref('');
const deptFormRef = ref();
//查询全部部门
const search = async() =>{
  //最初的url
// const result = await axios.get('http://127.0.0.1:4523/m1/6327138-6022507-default/depts');
// if(result.data.code)//js
// {
//   deptList.value = result.data.data;
// }
const result = await queryAllApi();
if(result.code){
  deptList.value = result.data;
}
}
//部门名称
const addDpet = () =>{
  dialogFormVisible.value=true;
  formTitle.value ='新增部门';
  //表单信息隐藏
  dept.value = {name: ''};
  //校验规则隐藏
  if (deptFormRef.value)
{

  deptFormRef.value.resetFields();
}
 
}
//添加部门
const save = async ()=>{
  //  判断校验规则 不存在
  if(!deptFormRef.value)return ;
//存在
  deptFormRef.value.validate(async(valid) =>  {
    if(valid){
      let result ;
      if(dept.value.id)
    {
      //修改
      result = await updateApi(dept.value);
    }
    else {
      //新增
       result = await addApi(dept.value);
    }
        if(result.code)//成功
      {
        //提示信息
        ElMessage.success('操作成功');
        //关闭对话框
        dialogFormVisible.value= false;
        //查询
        search();
      }//失败
      else {
        ElMessage.error(result.msg);
      }
    }
    else {
      ElMessage.error('表单校验不通过');
    }
  })
}

//校验规则
const rules = ref({
  name: [
    { required: true, message: '部门名称是必填的', trigger: 'blur' },
    { min: 2, max: 10, message: '部门名称的长度必须在2到10之间', trigger: 'blur' },
  ],
})
//编辑部门
const edit = async(id) =>{
  formTitle.value = '修改部门';
  if (deptFormRef.value)
{
  deptFormRef.value.resetFields();
}
  const result = await queryByIdApi(id);
  
  if(result.code)
{

  dialogFormVisible.value = true;
  dept.value = result.data;
  
}
}
//删除部门
const delById=async (id)=>{
  ElMessageBox.confirm('你确认删除操作该部门吗?','Warning',
    {confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning',})
    .then(async() => {//确认
     const result = await deleteByIdApi(id);
     if(result.code)
     {
      ElMessage.success('删除成功');
      search();
     }else{
      ElMessage.error('删除失败');
     }
    })
    .catch(() => {//取消
      ElMessage.info('你已取消删除');
      })
}
</script>

<template>
  <!-- 页面组件 -->
  <div>
    <h1>部门管理</h1>
    <div class="container">
      <el-button type="primary" @click="addDpet">+新增部门</el-button>
   
    </div>

    <!-- dept表格 -->
    <div class="container">
      <el-table :data="deptList" border style="width: 100%">
        <el-table-column type="index" label="序号" width="100" align="center"/>
        <el-table-column prop="name" label="部门名称" width="260" align="center" />
        <el-table-column prop="updateTime" label="最后操作时间" width="300" align="center"/>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" size="small" @click="edit(scope.row.id)"> <el-icon><Edit /></el-icon>编辑</el-button>
          
            <el-button type="danger" size="small" @click="delById(scope.row.id)"><el-icon><Delete /></el-icon> 删除</el-button>

          </template>
        </el-table-column>

      </el-table>
    </div>
  </div>
  <!-- dialog对话框 -->
  <el-dialog v-model="dialogFormVisible" :title="formTitle" width="500">
    <!-- {{dept}} -->
    <el-form :model="dept" :rules="rules" ref="deptFormRef">
      <el-form-item label="部门名称" label-width="80px" prop="name">
        <el-input v-model="dept.name" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>
.container{
  margin: 20px 0px;

}
</style>
